<template>
  <div>
    <el-tabs v-model="bcfactiveName" @tab-click="bcfhandleClick">
      <el-tab-pane label="对包仓费汇总" name="bcfone">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form ref="pfhzform" :model="bcfhzform" label-width="100px" class="flex-start ">
                <el-form-item label="时间范围">
                  <el-date-picker v-model="bcfhzform.month" value-format="yyyy-MM" type="month" placeholder="选择月" style="width: 400px;" />
                </el-form-item>
                <el-form-item label="收付类型">
                  <el-select v-model="bcfhzform.receiptPayType" placeholder="请选择收付类型" style="width:200px">
                    <el-option label="全部" value="0" />
                    <el-option label="应付上级" value="1" />
                    <el-option label="应收上级" value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="bcfhzcx">查询</el-button>
                  <elbutton :obj="bcfhzform" @dj="bcfhzclear" />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable ref="multipleTable" :loading="bcfhzloading" :data="bcfhztableData" :th="bcfhzth" :n="3" />
            </div>
          </el-col>

        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end;">
          <pagination :current-page="bcfhzform.pageDate.pageNum" :page-size="bcfhzform.pageDate.pageSize" :total="bcfhztotal" @size-change="bcfhzhandleSizeChange" @current-change="bcfhzhandleCurrentChange" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="对包仓费明细" name="bcftwo">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form ref="zlform" :model="bcfmxform" label-width="100px" class="flex-start ">
                <el-form-item label="时间范围" prop="zltime">
                  <el-date-picker v-model="bcfmxform.Time" value-format="yyyy-MM-dd" style="width: 500px;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="bcfmxpicker" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="bcfmxcx">查询</el-button>
                  <elbutton :obj="bcfmxform" @dj="bcfmxclear" />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable ref="multipleTable" :loading="bcfmxloading" :data="bcfmxtableData" :th="bcfmxth" :n="3" />
            </div>
          </el-col>

        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end;">
          <pagination :current-page="bcfmxform.pageDate.pageNum" :page-size="bcfmxform.pageDate.pageSize" :total="bcfmxtotal" @size-change="bcfmxhandleSizeChange" @current-change="bcfmxhandleCurrentChange" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>import { Getbcfhztable, Getbcfmxtable } from '@/api/ReconciliationCenter'
export default {
  data() {
    return {
      bcfactiveName: 'bcfone',
      // 包仓费汇总
      bcfhzth: [],
      bcfhztotal: 0,
      bcfhzform: {
        month: '',
        pageDate: {
          pageNum: 1,
          pageSize: 1
        },
        receiptPayType: ''
      },
      bcfhzloading: false,
      bcfhztableData: [],
      // 包仓费明细
      bcfmxth: [],
      bcfmxtotal: 0,
      bcfmxform: {
        endTime: '',
        pageDate: {
          pageNum: 1,
          pageSize: 1
        },
        startTime: ''
      },
      bcfmxloading: false,
      bcfmxtableData: []
    }
  },
  methods: {
    bcfhandleClick(tab, event) { },
    // 包仓费汇总查询
    bcfhzcx() {
      if (this.bcfhzform.month === '') {
        this.$message('请选择月份')
        return
      }
      this.bcfhzonSubmit()
    },
    async bcfhzonSubmit() {
      this.bcfhzloading = true
      const res = await Getbcfhztable(this.bcfhzform)
      this.bcfhzloading = false
      console.log('包仓费汇总', res)
      if (res.code === 200) {
        this.bcfhztableData = res.data.list.data
        this.bcfhztotal = res.data.list.total
        this.bcfhzth = res.data.fields
      } else {
        this.bcfhztableData = []
        this.bcfhztotal = 0
      }
    },
    // 包仓费汇总分页
    bcfhzhandleSizeChange(val) {
      this.bcfhzform.pageDate.pageSize = val
      this.bcfhzform.pageDate.pageNum = 1
      this.bcfhzcx()
    },
    bcfhzhandleCurrentChange(val) {
      this.bcfhzform.pageDate.pageNum = val
      this.bcfhzcx()
    },

    // 包仓费明细查询
    bcfmxcx() {
      if (this.bcfmxform.startTime === '') {
        this.$message('请选择日期')
        return
      }
      this.bcfmxonSubmit()
    },
    async bcfmxonSubmit() {
      this.bcfmxloading = true
      const res = await Getbcfmxtable(this.bcfmxform)
      this.bcfmxloading = false
      console.log('包仓费明细', res)
      if (res.code === 200) {
        this.bcfmxtableData = res.data.list.data
        this.bcfmxtotal = res.data.list.total
        this.bcfmxth = res.data.fields
      } else {
        this.bcfmxtableData = []
        this.bcfmxtotal = 0
      }
    },
    // 获取派费明细时间
    bcfmxpicker(value) {
      if (value === null) {
        this.bcfmxform.startTime = ''
        this.bcfmxform.endTime = ''
      } else {
        this.bcfmxform.startTime = value[0]
        this.bcfmxform.endTime = value[1]
      }
    },
    // 派费明细分页
    bcfmxhandleSizeChange(val) {
      this.bcfmxform.pageDate.pageSize = val
      this.bcfmxform.pageDate.pageNum = 1
      this.bcfmxcx()
    },
    bcfmxhandleCurrentChange(val) {
      this.bcfmxform.pageDate.pageNum = val
      this.bcfmxcx()
    },
    // 重置
    bcfmxclear(aaa) {
      this.bcfmxform = aaa
    },
    bcfhzclear(aaa) {
      this.bcfhzform = aaa
    }

  }
}
</script>

<style >
.flex-start {
  display: flex;
}
</style>
